import React from 'react'

/**
 * 兄弟之间的通信问题，找到最近的父组件元素，将要传递的数据存放到父组件中，然后将父组件的数据再次转发给另一个兄弟组件的
 * 状态提升（是一种数据共享的理念）
 * 要解决的问题：多个组件之间数据共享的问题。
 * 怎么做？具体的做法是，找到这几个组件的最近的父组件，把需要共享的状态数据定义在父组件中。
*/
class TChild extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      temperature: 0
    }
  }

  changeTemp (e) {
    let { onChange } = this.props
    this.setState({
      temperature: e.target.value
    }, () => {
      // 数据包装后，通过自定义事件，回传给父组件
      e.target.temperature = Number(e.target.value) / (5 / 9) + 32
      onChange && onChange(e)
    })
  }
  
  render () {
    let { temperature } = this.state

    return (
      <div className="t-child">
        <h3>摄氏温度：</h3>
        <input 
          type="text"
          placeholder='请输入温度'
          value={ temperature }
          onChange={ e => this.changeTemp(e) }
        />
      </div>
    )
  }
}

const HChild = props => {
  return (
    <div className="t-child">
      <h3>华氏温度：</h3>
      <span>{ props.temperature }</span>
    </div>
  )
}

export default class TestState extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      temperature: 0
    }
  }

  changeTemp (e) {
    this.setState({
      temperature: e.target.temperature
    })
  }

  render () {
    let { temperature } = this.state

    return (
      /**
       * TChild和HChild是兄弟组件
       * 问题：用户输入摄氏温度，将摄氏温度装换为华氏温度？
       * 此时，需要将摄氏温度传递给华氏温度
      */
      <div className="container">
        <TChild onChange={ e => this.changeTemp(e) }/>
        <hr/>
        <HChild temperature={ temperature }/>
      </div>
    )
  }
}